<template>
  <div class="ListBox" ref="list">
    <div
      class="ListBox-list"
      :class="listClass"
    >
      <div
        class="ListBox-item"
        v-for="(item,index) in list"
        :key="index"
        @click="itemOn(item,list)"
      >
        <slot name="item" :scope="item"></slot>
      </div>
      <div
        class="ListBox-item"
        v-if="$scopedSlots.itemAdd"
      >
        <slot name="itemAdd"></slot>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "FlexListBox",
  props: {
    list:{
      type:Array,
      required: true,
    },
    listWidth:{
      type:Number,
    },
    page:{
      type:Object,
    },
    search:{
      type:Object,
    },
    sizeNum:{
      //返回搜索的数量
      type:Number,
      default: () => {
        return 10;
      },
    },
    isOn:{
      type:Boolean,
      default: () => {
        return false;
      },
    },
    isFlex:{
      type:Boolean,
      default: () => {
        return false;
      },
    },
    onName:{
      type:String,
      default: () => {
        return 'on';
      },
    },
  }, // 获取父组件数据
  components: {

  },
  mounted() {
    this.getWidth()
    window.onresize = () => (() => {
      this.getWidth()
    })();
  },
  data() {
    return {
      listNum:1,
      classWidth:null,
    };
  },
  methods: {
    itemOn(val,valAll){
      if (this.isOn){
        valAll.forEach(item=>{
          this.$set(item,this.onName,false)
          item[this.onName]=false
        })
        this.$set(val,this.onName,true)
      }
      this.$emit('itemOn',val)
    },
    getWidth(){
      this.$nextTick(()=>{
        // console.log(this.$refs.list.offsetWidth)
        this.classWidth=this.$refs.list.offsetWidth
      })
    },
  },
  computed: {
    listClass(){
      let listClass='list1'
      if (this.classWidth && this.listWidth){
        let list=this.classWidth/this.listWidth
        let minList=Math.floor(list)
        listClass='list'+minList
        if (this.search){
          let collect=minList*this.sizeNum
          if (minList<3){
            collect*=2
          }
          this.search.pageSize=collect
          this.search.sizeNum=collect
        }
      }
      return listClass
    }
  }
};
</script>
<style  lang="scss" scoped>
$m:12px;
.ListBox{
  .ListBox-item{
    .listBorder{
      border: 1px #e6e6e6 solid;
      border-radius:4px;
      position: relative;
      padding:#{$m};
      overflow: hidden;
      cursor: pointer;
      &:hover{
        border-color: #3f61f1;
        color: #3f61f1;
        box-shadow: 0 2px 8px rgba(63, 97, 241, 0.1);
      }
      &.on{
        background: #3f61f1;
        color: #fff;
      }
    }
  }
  @for $i from 1 to 20 {
    .list#{$i}{
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
      margin-bottom: -#{$m};
      >*{
        margin-right: #{$m};
        margin-bottom: #{$m};
        &:nth-child(#{$i}n){
          margin-right: 0!important;
        }
        width: calc((100% + #{$m}) / #{$i} - #{$m});
      }
    }
  }
}
</style>
